<!DOCTYPE html>
<html lang="en" xmlns:th="https://www.thymeleaf.org" >

<div th:replace="common/common::html"></div>
<head>

    <meta charset="UTF-8">
    <title th:text="#{login.title}">登录页面</title>
    <script th:inline="javascript" >

            $(function() {
                $("#submit-btn-id").click(function (event) {//登录按钮
                    event.stopPropagation();
                   var flag = $("input.form-control").checkDom();
                   if(!flag){
                       return;
                   }

                   verifyCode = $("#verify-code-id").val();

                   var authFlag = /*[[${session.authFlag}]]*/'';
                   if (authFlag === '1'){
                       $.ajax({
                           type: 'post',
                           async: false,
                           dataType : 'json',
                           url: /*[[@{/login/authVerifyCode}]]*/'',
                           data: [
                               {name:"verifyCode",value:verifyCode}
                           ],
                           success: function (data) {
                               if (data.success){
                                   $("#login-form-id").submit();
                               }else{
                                   message(data.msg);
                               }


                           },
                           error: function(msg){
                               message(/*[[#{common.error}]]*/'');
                           }
                       });
                   }else{
                       $("#login-form-id").submit();
                   }
                });



                $("#verify-btn-id").click(function () {//验证码按钮
                    var link = /*[[@{/login/getVerifyCodeImg}]]*/
                    $(this).attr("src",link)
                })
            });//ready
    </script>
    <style>
        html,body{
            height: 100%;
        }

        .form-control{
            display: inline-block;
            width: 90%;
        }
    </style>
</head>
<body style="display: flex;flex-direction:column;height: 100%;margin-left: 5px" >
<!--    <img   th:src="@{/assets/images/sea.jpg}">-->
    <div style="flex-basis: 82px">
        <img th:if="${session.lang} eq 'en'" th:src="@{/assets/images/nt.png}">
        <img th:if="${session.lang} eq 'zh'" th:src="@{/assets/images/nt.png}">
        <div style=" position: absolute; top: 24px;right: 10px">
            <a class="btn" th:href="@{/login/login(lang=zh)}" th:text="#{login.chinese}">中文</a>
            <a class="btn" th:href="@{/login/login(lang=en)}" th:text="#{login.english}">英文</a>
        </div>

    </div>

    <div style="flex-grow: 1;display: flex;flex-direction: row; " >
        <div style="flex-grow: 1;flex-basis: 200px;margin-left: 250px;margin-top: 60px">
            <img th:src="@{/assets/images/xy.jpg}"></img>

        </div>
        <div style="flex-basis: 360px;margin-right: 300px;margin-top: 120px">
            <form id="login-form-id" th:action="@{/login/verification}" method="post"
                  style="margin: 20px;padding:20px;border: 1px solid #AAAAAA;">
                <div class="form-group">
                    <i class="glyphicon glyphicon-user" ></i>
                    <input class="form-control" type="text" name="username"th:placeholder="#{login.user.name.placeholder}"
                           th:title="#{login.user.name.title}" pattern="^.{1,20}$">
                </div>
                <div class="form-group">
                   <i class="glyphicon glyphicon-lock" ></i>
                    <input class="form-control" type="password" name="password" th:placeholder="#{login.password.placeholder}"
                           th:title="#{login.password.title}" pattern="^.{1,10}$">
                </div>

                <div class="form-group" th:if="${session.authFlag} eq '1'">
                    <input id="verify-code-id" style="width: 168px">
                    <img id="verify-btn-id"  class="btn" th:src="@{/login/getVerifyCodeImg}" >

                </div>

                <div class="form-group" >
                <a id="submit-btn-id" class="btn-success form-control" th:text="#{login.submit}"
                   style="text-align: center;width: 97%;"></a>
            </div>
                <div class="form-group" style="display: flex;flex-direction: row;justify-content: space-between;">
                     <a id="regist-btn-id" href="regPage" class="button" th:text="#{login.register}">注册</a>
                    <a id="forget-btn-id" href="forgetPage" class="button" th:text="#{login.forget}">忘记密码</a>
                </div>
            </form>
        </div>
    </div>
</body>
</html>